<template>
  <div class="setDialog">
    <el-dialog
      title="编辑角色"
      :visible="visible"
      @update:visible="$emit('update:visible',$event)"
    >
      <el-form :model="form">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="角色描述" :label-width="formLabelWidth">
          <el-input v-model="form.description" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogFormVisible = false"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SetDialog',
  prop:{
      visible:Boolean,
      form: Object
  },
  data() {
    return {
      dialogFormVisible: true,
      form: {
        name: '',
        description: ''
      },
      formLabelWidth: '100px'
    }
  }
}
</script>

<style lang="scss">
.setDialog {
  .el-input {
    width: 80%;
  }
}
</style>
